<template>
    <div>
        <el-form :inline="true" :model="queryForm.data" class="demo-form-inline">
            <el-form-item >
                <el-select v-model="queryForm.data.collegeCode" clearable placeholder="请选择学院" @change="selectCollege">
                    <el-option
                        v-for="item in options.collegeCode"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="queryForm.data.year"
                    @change="selectYear"
                    type="year"
                    placeholder="选择年份"
                    value-format = "yyyy">
                </el-date-picker>   
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="sendMsg">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: "searchBar",
  data() {
    return {
      url: {
        collegeOptions: "/datacenter/college/query/spinner"
      },
      queryForm: {
        dialogFormVisible: false, //不允许弹出对话框
        data: {
          //学院
          collegeCode: "",
          //年份
          year: new Date().getFullYear().toString() 
        }
      },
      options: {
        collegeCode: []
      }
    };
  },
  methods: {
    sendMsg: function() {
      this.$emit(
        "msgCallBack",
        this.queryForm.data.collegeCode,
        this.queryForm.data.year
      );
      this.$emit("loadEcharts");
    },
    selectCollege: function(val) {
      let college = {};
      college = this.options.collegeCode.find(item => {
        return item.id === val;
      });
      console.log(college.text);
      this.$emit("collegeCallBack", college);
    },
    selectYear:function(){
      this.$emit("yearCallBack",this.queryForm.data.year);
    }
  },
  mounted() {
    this.$http.get(this.url.collegeOptions).then(
      (res) => {
        if (res.data.success) {
          this.options.collegeCode = res.data.data;
          this.sendMsg();
        } else {
          this.$message({
            type: "error",
            message: res.data.info
          });
        }
      },
      (res) => {
        this.$message({
          showClose: true,
          message: "网络错误,code=" + res.status,
          type: "error"
        });
      }
    );
  }
};
</script>

